<template>
  <div>
    <a-modal
      :title="null"
      :footer="null"
      :closable="false"
      :width="480"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
      <div class="content">
        <a-row>
          <a-col :span="5">
            <img :src="require('@/assets/phone2.png')" style="width: 74px;height: 74px;margin-bottom: 5px;margin-right: 15px;">
          </a-col>
          <a-col :span="19">
            <p style="color: #000000;font-size: 16px;">拨打电话</p>
            <!-- 输入拨打-->
            <div v-if="type==='search'">
              <a-form :form="form" layout="inline">
                <a-row>
                  <a-col :span="24">
                    <a-form-item has-feedback>
                      <a-input style="width: 200px;" placeholder="请输入电话号码" v-decorator="['search_value',{rules: [{ required: true, message: '请输入联系号码！' },{validator: validatorPhone}]}]"></a-input>
                    </a-form-item>
                    <a-form-item has-feedback>
                      <a-button style="margin-left: 10px;" type="primary" @click="onSearchAndCall()">点击拨打</a-button>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </div>
            <!-- 选择拨打-->
            <div v-else>
              <p>
                <span>客户姓名：</span><span>{{name}}</span>
                <span style="margin-left: 30px;">卡号：</span><span>{{cardNo}}</span>
              </p>
              <div class="g-flex g-y-start">
                <span>联系电话：</span>
                <div class="g-flex-col ">
                  <div class="g-flex" v-for="(item,index) in tel_arr" :key="index" style="margin-bottom: 10px;" >
                    <div style="margin-left: 10px;font-size: 20px;color: #000000;line-height: 21px;width: 140px;">{{ item.contactContent }}</div>
                    <a-button style="margin-left: 15px;padding: 2px 10px;" type="primary" @click="clickCallPhone(item.contactContent,item.name,item.customerId)">点击拨打</a-button>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>

    </a-modal>

  </div>

</template>

<script>
import {callPhone,getUserListByTel} from '@/api/components/callPhone'
import Bus from '@/utils/bus'
import { mapState } from 'vuex'
export default {
  props:{
    tel_arr:{
      type:Array,
      default: ()=>[]
    },
    type:{
      type: String,
      default:'select'
    }
  },
  data(){
    return{
      search_value:'',
      value: [],
      disabled:true,
      visible: false,
      visibleTable: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
    }
  },
  watch:{
    tel_arr(val){
      return val
    }
  },
  computed:{
    ...mapState({
      equipment_status:state=>state.phoneBox.equipment.status,
      connect_status:state=>state.phoneBox.connect.status,
    }),
    name(){
      if(this.tel_arr.length>0) return this.tel_arr[0].name
      return ''
    },
    cardNo(){
      if(this.tel_arr.length>0) return this.tel_arr[0].cardNo
      return ''
    }
  },
  methods:{
    /**查找并且拨打客户
     *
     * @returns {Generator<*, void, *>}
     */
    onSearchAndCall(){

      if(!this.connect_status||!this.equipment_status){
        this.$message.info('未连接设备')
        return
      }
      const search_value = this.form.getFieldValue('search_value')
      const { form: { validateFields } } = this
      validateFields((errors, values) => {
        if (errors) {
          console.log('表单检验未通过111',errors,values)
          return
        }
        getUserListByTel(search_value).then(res=>{
          console.log('搜索到的电话号码结果为',res)
          const customer =res.rows[0]
          if(res.total==1){
            this.clickCallPhone(search_value,customer.name,customer.customerId)
          }else{
            this.clickCallPhone(search_value,'','')
          }
        })
      })
    },
    show () {
      this.visible = true
      this.form.resetFields()
      if(this.type=='search'){
        this.search_value=''
      }
    },
    clickCallPhone(contactContent,name,customerId,type='select'){
      if(!this.connect_status||!this.equipment_status){
        this.$message.info('未连接设备')
        return
      }
      this.visible=false
      const ccid =window.localStorage.getItem('ccid')
      const params={
        sendTel:contactContent,
        customerName:name,
        customerId:	customerId,
        ccid:ccid
        //测试
        // sendTel:	'13809796653',
        // customerName:name,
        // customerId:	'20181026095800497478',
        // ccid:'9860085191435282523'
      }
      callPhone(params).then(res=>{
          console.log('拨打电话结果为',res)
          if(res.code==200){
            const data= res.data
            // this.call_res=data
            this.$store.commit('phoneBox/setCustomer',data)
            if(!data.switchCard){
              Bus.$emit('OnDial', {contactContent,type:type==='search'?true:false} )
            }else{
              Bus.$emit('OnCBSwitchNext') //超过次数限制换卡
              setTimeout(()=>{
                Bus.$emit('OnDial', {contactContent,type:type==='search'?true:false} )
              },1000)
            }
          }else{
            this.$message.info(res.message)
          }

       })
    },
    /**
     表单校验手机号
     * */
    validatorPhone (rule, value, callback) {
      const reg_phone = /^1[3456789]\d{9}$/
      const reg_tel = /^(\d{3,4}-)?\d{7,8}$/
      if(!reg_phone.test(value)&&!reg_tel.test(value)){
        callback('格式有误！')
      }
      callback()
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>

<style scoped>
/deep/ .ant-card-head{
  border-bottom: none;
}
/deep/ .ant-card-body{
  padding: 0 24px;
}
/deep/ .ant-card-head-title{
  font-weight: bold;
}
/deep/ .ant-page-header-heading-title{
  font-weight: normal;
  font-size: 16px;
}
.content{
  min-height: 100px;
}

</style>